
import React, { useState, Fragment, useEffect } from 'react';
import { Carousel } from 'antd-mobile';
import styles from './index.module.scss';
import { reqNews, reqGroups, reqSwiper, baseURL } from '../../api'
import Search from '../../components/Search'
import NavBar from './child/NavBar'
import News from './child/News';
import Group from './child/Group';

export default function Home() {
  const [swiperData, setSwiper] = useState([]);
  const [groupsData, setGroups] = useState([]);
  const [newsData, setNews] = useState([]);
  useEffect(() => {
    getSwiper();
    getGroups();
    getNews()
  }, [])
  const getSwiper = async () => {
    const res = await reqSwiper();
    setSwiper(res)
  }
  const getNews = async () => {
    const res = await reqNews()
    setNews(res)
  }
  const getGroups = async () => {
    const res = await reqGroups()
    setGroups(res)
  }

  return <Fragment>
    <div className={styles.swiper}>
      <Search />
      {
        <Carousel autoplay infinite  >
          {
            swiperData.map(v => <span className={styles.swiper_height} key={v.id}>
              <img className={styles.swiper_height} alt='' src={baseURL + v.imgSrc} loading='lazy' />
            </span>)
          }
        </Carousel>
      }
    </div>
    <NavBar />
    <Group groupsData={groupsData} baseURL={baseURL} />
    <News newsData={newsData} baseURL={baseURL} />
  </Fragment >

}